<!--
 * @Author: your name
 * @Date: 2021-02-07 17:25:17
 * @LastEditTime: 2021-02-07 18:41:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \awesomepos\src\components\common\leftNav.vue
-->
<template>
    <div class="left-nav">
        <ul>
            <li>
                <i class="icon iconfont icon-layergroup-fill"></i>
                <div>收银</div>
            </li>
            <li>
                <i class="icon iconfont icon-filter"></i>
                <div>店铺</div>
            </li>
              <li>
                <i class="icon iconfont icon-chuyulaji-canzhilaye"></i>
                <div>商品</div>
            </li>
              <li>
                <i class="icon iconfont icon-shenfenzheng"></i>
                <div>会员</div>
            </li>
              <li>
                <i class="icon iconfont icon-layer-group"></i>
                <div>统计</div>
            </li>

        </ul>
    </div>
</template>

<script>
export default {
    name:"leftNav"
}
</script>

<style>
    .left-nav{
        width: 3%;
        height: 100%;
        background: #099bfc;
        text-align: center;
        float: left;
        min-width: 50px;
    }
    .left-nav ul{
        list-style-type: none;
        padding: 0 0 510px 5px;
    }
    .left-nav ul li{
        padding: 20px 0 0 0;
        cursor: pointer;
        border-bottom: 1px dashed #bbafaf;
    }
   
    .left-nav ul li i{
        font-size: 25px;
        color: aliceblue;
    }
    .left-nav ul li div{
        color: #ffffff;
        padding: 0px 0 10px 0;
    }
     .left-nav ul li:hover{
        font-weight: bold;
    }
</style>